<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发票管理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-red-600 to-pink-600 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="b2b-profile.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">发票管理</h1>
                <button onclick="createInvoice()" class="text-white hover:opacity-80">
                    <i class="fas fa-plus text-lg"></i>
                </button>
            </div>
        </div>

        <!-- Invoice Status Card -->
        <div class="px-4 py-3 bg-gradient-to-r from-red-600 to-pink-600">
            <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4">
                <div class="text-white">
                    <p class="text-sm opacity-80 mb-1">本月开票</p>
                    <p class="text-2xl font-bold mb-3">¥285,640.00</p>
                    <div class="grid grid-cols-3 gap-4">
                        <div class="text-center">
                            <p class="text-xs opacity-80">已开票</p>
                            <p class="text-lg font-semibold">128</p>
                        </div>
                        <div class="text-center">
                            <p class="text-xs opacity-80">待开票</p>
                            <p class="text-lg font-semibold">15</p>
                        </div>
                        <div class="text-center">
                            <p class="text-xs opacity-80">已作废</p>
                            <p class="text-lg font-semibold">2</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Scrollable Content -->
        <div class="h-[calc(852px-220px)] overflow-y-auto pb-20">
            <!-- Quick Actions -->
            <div class="p-4">
                <div class="grid grid-cols-2 gap-3">
                    <button onclick="createInvoice()" class="bg-white rounded-xl border border-gray-200 p-4 text-center hover:bg-gray-50 transition-colors">
                        <i class="fas fa-plus text-2xl text-red-600 mb-2"></i>
                        <p class="text-sm font-medium">开具发票</p>
                    </button>
                    <button onclick="batchInvoice()" class="bg-white rounded-xl border border-gray-200 p-4 text-center hover:bg-gray-50 transition-colors">
                        <i class="fas fa-layer-group text-2xl text-blue-600 mb-2"></i>
                        <p class="text-sm font-medium">批量开票</p>
                    </button>
                </div>
            </div>

            <!-- Recent Invoices -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center justify-between">
                    <span class="flex items-center">
                        <span class="w-1 h-4 bg-red-600 mr-2 rounded-full"></span>
                        最近发票
                    </span>
                    <span onclick="viewAllInvoices()" class="text-red-600 text-xs cursor-pointer hover:text-red-700">
                        查看全部 <i class="fas fa-chevron-right text-xs"></i>
                    </span>
                </h3>
                <div class="space-y-3">
                    <!-- Invoice 1 -->
                    <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
                        <div class="p-3">
                            <div class="flex justify-between items-start mb-2">
                                <div>
                                    <p class="text-sm font-medium">电子普通发票</p>
                                    <p class="text-xs text-gray-500 mt-1">发票号码: 12345678901234567890</p>
                                </div>
                                <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full">已开具</span>
                            </div>
                            <div class="grid grid-cols-3 gap-3 text-xs mb-3">
                                <div>
                                    <p class="text-gray-500">开票日期</p>
                                    <p class="font-medium">2025-01-08</p>
                                </div>
                                <div>
                                    <p class="text-gray-500">金额</p>
                                    <p class="font-medium text-red-600">¥1,298.00</p>
                                </div>
                                <div>
                                    <p class="text-gray-500">购买方</p>
                                    <p class="font-medium">科技公司</p>
                                </div>
                            </div>
                            <div class="flex space-x-2">
                                <button onclick="downloadInvoice('inv001')" class="flex-1 bg-red-50 text-red-600 text-xs py-2 rounded-lg hover:bg-red-100 transition-colors">
                                    下载PDF
                                </button>
                                <button onclick="sendInvoice('inv001')" class="bg-blue-50 text-blue-600 text-xs px-3 py-2 rounded-lg hover:bg-blue-100 transition-colors">
                                    发送
                                </button>
                                <button onclick="voidInvoice('inv001')" class="bg-gray-50 text-gray-600 text-xs px-3 py-2 rounded-lg hover:bg-gray-100 transition-colors">
                                    作废
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Invoice 2 -->
                    <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
                        <div class="p-3">
                            <div class="flex justify-between items-start mb-2">
                                <div>
                                    <p class="text-sm font-medium">电子专用发票</p>
                                    <p class="text-xs text-gray-500 mt-1">发票号码: 09876543210987654321</p>
                                </div>
                                <span class="bg-orange-100 text-orange-600 text-xs px-2 py-1 rounded-full">待开具</span>
                            </div>
                            <div class="grid grid-cols-3 gap-3 text-xs mb-3">
                                <div>
                                    <p class="text-gray-500">申请日期</p>
                                    <p class="font-medium">2025-01-08</p>
                                </div>
                                <div>
                                    <p class="text-gray-500">金额</p>
                                    <p class="font-medium text-red-600">¥5,680.00</p>
                                </div>
                                <div>
                                    <p class="text-gray-500">购买方</p>
                                    <p class="font-medium">贸易有限公司</p>
                                </div>
                            </div>
                            <div class="flex space-x-2">
                                <button onclick="processInvoice('inv002')" class="flex-1 bg-orange-50 text-orange-600 text-xs py-2 rounded-lg hover:bg-orange-100 transition-colors">
                                    立即开具
                                </button>
                                <button onclick="editInvoiceRequest('inv002')" class="bg-blue-50 text-blue-600 text-xs px-3 py-2 rounded-lg hover:bg-blue-100 transition-colors">
                                    编辑
                                </button>
                                <button onclick="cancelInvoiceRequest('inv002')" class="bg-gray-50 text-gray-600 text-xs px-3 py-2 rounded-lg hover:bg-gray-100 transition-colors">
                                    取消
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Invoice Settings -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-red-600 mr-2 rounded-full"></span>
                    开票信息
                </h3>
                <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                    <div class="p-3 border-b border-gray-100">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">企业名称</span>
                            <div class="flex items-center">
                                <span class="text-sm font-medium mr-2">优选数码科技有限公司</span>
                                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                            </div>
                        </div>
                    </div>
                    <div class="p-3 border-b border-gray-100">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">纳税人识别号</span>
                            <div class="flex items-center">
                                <span class="text-sm font-medium mr-2">91110000MA01234567</span>
                                <button onclick="copyTaxNumber()" class="text-blue-600 text-xs">复制</button>
                            </div>
                        </div>
                    </div>
                    <div class="p-3 border-b border-gray-100">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">地址电话</span>
                            <div class="flex items-center">
                                <span class="text-sm font-medium mr-2">北京市朝阳区... 010-85123456</span>
                                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                            </div>
                        </div>
                    </div>
                    <div class="p-3">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">开户行及账号</span>
                            <div class="flex items-center">
                                <span class="text-sm font-medium mr-2">工商银行 1234567890</span>
                                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                            </div>
                        </div>
                    </div>
                    <div class="px-3 pb-3">
                        <button onclick="editInvoiceInfo()" class="w-full bg-red-50 text-red-600 text-sm py-2 rounded-lg hover:bg-red-100 transition-colors">
                            编辑开票信息
                        </button>
                    </div>
                </div>
            </div>

            <!-- Tax Report -->
            <div class="p-4 pb-8">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-red-600 mr-2 rounded-full"></span>
                    税务报表
                </h3>
                <div class="grid grid-cols-2 gap-3">
                    <button onclick="downloadTaxReport('monthly')" class="bg-white rounded-xl border border-gray-200 p-4 text-center hover:bg-gray-50 transition-colors">
                        <i class="fas fa-calendar-alt text-2xl text-blue-600 mb-2"></i>
                        <p class="text-sm font-medium">月度报表</p>
                        <p class="text-xs text-gray-500 mt-1">2025年1月</p>
                    </button>
                    <button onclick="downloadTaxReport('yearly')" class="bg-white rounded-xl border border-gray-200 p-4 text-center hover:bg-gray-50 transition-colors">
                        <i class="fas fa-chart-bar text-2xl text-green-600 mb-2"></i>
                        <p class="text-sm font-medium">年度报表</p>
                        <p class="text-xs text-gray-500 mt-1">2024年度</p>
                    </button>
                </div>
            </div>
        </div>

        <!-- Bottom Action Bar -->
        <div class="absolute bottom-1 left-0 right-0 bg-white border-t border-gray-200 px-4 py-3 shadow-lg">
            <div class="flex space-x-3">
                <button onclick="createInvoice()" class="flex-1 bg-red-600 text-white font-medium py-2.5 rounded-lg hover:bg-red-700 transition-colors">
                    <i class="fas fa-file-invoice mr-2"></i>开具发票
                </button>
                <button onclick="scanInvoice()" class="bg-gray-100 text-gray-700 font-medium px-4 py-2.5 rounded-lg hover:bg-gray-200 transition-colors">
                    <i class="fas fa-qrcode"></i>
                </button>
            </div>
        </div>
    </div>

    <script>
        // Create invoice
        function createInvoice() {
            window.location.href = 'b2b-create-invoice.html';
        }

        // Batch invoice
        function batchInvoice() {
            window.location.href = 'b2b-batch-invoice.html';
        }

        // View all invoices
        function viewAllInvoices() {
            window.location.href = 'b2b-all-invoices.html';
        }

        // Invoice actions
        function downloadInvoice(invoiceId) {
            showToast('正在下载发票PDF...');
            setTimeout(() => {
                showToast('发票已下载到本地');
            }, 1500);
        }

        function sendInvoice(invoiceId) {
            const email = prompt('请输入接收邮箱:', 'customer@example.com');
            if (email) {
                showToast(`发票已发送至${email}`);
            }
        }

        function voidInvoice(invoiceId) {
            if (confirm('确定要作废此发票吗？\n\n作废后不可恢复，请谨慎操作。')) {
                showToast('发票已作废');
            }
        }

        function processInvoice(invoiceId) {
            showToast('正在开具发票...');
            setTimeout(() => {
                showToast('发票开具成功');
            }, 2000);
        }

        function editInvoiceRequest(invoiceId) {
            window.location.href = `b2b-edit-invoice.html?id=${invoiceId}`;
        }

        function cancelInvoiceRequest(invoiceId) {
            if (confirm('确定要取消此开票申请吗？')) {
                showToast('开票申请已取消');
            }
        }

        // Edit invoice info
        function editInvoiceInfo() {
            window.location.href = 'b2b-edit-invoice-info.html';
        }

        // Copy tax number
        function copyTaxNumber() {
            navigator.clipboard.writeText('91110000MA01234567').then(() => {
                showToast('纳税人识别号已复制');
            }).catch(() => {
                showToast('复制失败，请手动复制');
            });
        }

        // Download tax report
        function downloadTaxReport(type) {
            const reportNames = {
                'monthly': '月度税务报表',
                'yearly': '年度税务报表'
            };
            
            showToast(`正在生成${reportNames[type]}...`);
            setTimeout(() => {
                showToast(`${reportNames[type]}已下载`);
            }, 2000);
        }

        // Scan invoice
        function scanInvoice() {
            alert('扫码开票\n\n客户扫码后可直接填写开票信息，\n系统自动生成发票申请。');
        }

        // Toast notification
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            showToast('发票管理已加载');
        });
    </script>
</body>
</html>